<script setup lang="ts">
import { computed, ref } from 'vue'
import type { Prescription } from '@/types/prescription'
import { onLoad } from '@dcloudio/uni-app'
import { getPrescription, payPrescription } from '@/services/prescription'

const prescription = ref<Required<Prescription>>()

onLoad(async (query) => {
  prescription.value = await getPrescription(query!.id)
})

const medicine = computed(() => {
  return prescription.value?.medicine
})

async function pay() {
  await payPrescription(prescription.value!.id)
  await uni.navigateBack()
}
</script>

<template>
  <view class="container" v-if="prescription && medicine">
    <view class="box patient">
      <view>
        患者：{{prescription.patient.name}}
      </view>
      <view>
        性别：男
      </view>
      <view>
        年龄：55
      </view>
    </view>
    <view class="medicine box">
      <view class="goods-item">
        <!-- 商品左侧图片区域 -->
        <view class="goods-item-left">
          <image :src="medicine.cover" class="goods-pic"></image>
        </view>
        <!-- 右侧信息区域 -->
        <view class="goods-item-right">
          <!-- 标题 -->
          <view class="name">
            <view class="">{{medicine.medicineName}} </view>
            <view class="num">
              <view style="color: #c00000;">{{prescription.medicineNum}}</view>
              <view style="margin-left: 10px;">盒</view>
            </view>
          </view>

          <view style="color: #999999;" class="goods-info">{{medicine.specificationPackaging}}</view>
          <view class="goods-info">有效期至：{{medicine.validUntil}}</view>
          <view class="goods-info-box">
            <!-- 价格 -->
            <view class="">
              单价：
            </view>
            <view class="goods-price">￥{{medicine.price}}</view>
          </view>
        </view>
      </view>
      <view class="medicine-other total-price">
        <view>
          总价：
        </view>
        <view class="goods-price">￥{{prescription.medicineAmount }}</view>
      </view>

      <view class="medicine-other">
        用法用量：{{medicine.usageDosage}}
      </view>
      <view class="medicine-other">
        疗程：{{medicine.treatmentCourse}}
      </view>
    </view>

    <view class="doctor box">
      <view class="title">医生姓名：{{prescription.doctor.name}}</view>

      <view style="margin-top: 20px;" class="punch-time">开方时间：{{ prescription.prescribeDate }}</view>
    </view>

    <view class="bottom-container">
      <view class="bottom">
        <view class="total-price">
          <view class="">
            需支付：
          </view>
          <view class="goods-price ">
            ￥{{prescription.medicineAmount }}
          </view>
        </view>

        <button @click="pay" type="warn">支付</button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.doctor {
  border-bottom: 1px solid #f0f0f0;
}

.goods-price {
  font-size: 16px;
  color: #c00000;
}

.container {
  padding: 10px;

  .box {
    background-color: #FFFFFF;
    margin-bottom: 10px;
    padding: 5px;
  }

  .patient {
    padding: 5px 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
  }
}

.medicine {
  border-bottom: 1px solid #f0f0f0;
  .medicine-num {
    display: flex;
    align-items: center;
  }

  .medicine-other {
    margin-bottom: 10px;
  }

  .total-price {
    display: flex;
  }
}

.bottom-container {
  background-color: #FFFFFF;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;

  .bottom {
    margin-left: 10px;
    display: flex;
    align-items: center;

    .total-price {
      flex: 1;
      display: flex;

      .goods-price {
        font-size: 18px;
      }
    }

    button {
      margin: 0 5px 0 0px;
      flex: 1;
    }
  }
}

.goods-item {
  display: flex;
  padding: 10px 0px;
  // border-bottom: 1px solid #f0f0f0;

  .goods-item-left {
    margin-right: 15px;

    .goods-pic {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .goods-item-right {
    margin-right: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .name {
      font-size: 16px;
      display: flex;
      justify-content: space-between;

      .num {
        display: flex;
      }
    }

    .goods-info {
      font-size: 13px;
    }

    .goods-info-box {
      width: 100%;
      display: flex;
      // justify-content: space-between;
    }
  }
}
</style>
